<script>
    import p_1 from "$lib/assets/clients/01.jpg"
    import p_2 from "$lib/assets/clients/02.jpg"
    import p_3 from "$lib/assets/clients/03.jpg"

    import { Splide, SplideTrack, SplideSlide } from '@splidejs/svelte-splide';
    import '@splidejs/svelte-splide/css/skyblue';




</script>

<section id='section'>
    <div class="container max-w-7xl mx-auto p-6 ">
        <div class="p-4 flex flex-col items-center text-justify">
            <h1 class="text-4xl font-dosis uppercase font-semibold text-blue-d text-center"><span class="text-blue-m">What </span>our clients say</h1>
            <h3 class="text-blue-d uppercase">Testimonials</h3>
        </div>

        <section class="splide" aria-labelledby="carousel-heading">
          <h2 id="carousel-heading">Basic Structure Example</h2>

          <div class="splide__track">
                <ul class="splide__list">
                    <li class="splide__slide">Slide 01</li>
                    <li class="splide__slide">Slide 02</li>
                    <li class="splide__slide">Slide 03</li>
                </ul>
          </div>
        </section>



      

        <Splide
            class="bg-blue-l flex flex-col justify-between rounded-3xl"
            hasTrack={ false }
            

            options={ {
            
            
              breakpoints: {
                  768: {
                      arrows: false,
                  }
              }
            } }
            
       >

            <SplideTrack> 
                <SplideSlide>
                    <div class="">
                        <div class="p-4 flex justify-center items-center">
                            <img src="{p_1}" alt="" class="w-[200px] h-[200px] rounded-full object-cover">
                        </div>

                        <div class="p-4 flex flex-col">
                            <div class="pl-4 flex flex-row justify-between items-center">
                                <h1 class="text-3xl text-blue-d font-dosis">Ziska Katharina</h1>
                                <svg class="w-12 h-12 fill-slate-300">
                                    <use xlink:href="#quotation"></use>
                                </svg>
                            </div>
                            <div class="p-4">
                                <h3 class="text-blue-m text-xl">Dental Hygienist</h3>
                            </div>
                            <div class="bg-white rounded-3xl">
                                <p class="p-4 text-blue-d text-justify">
                                    We bought from an online store many years ago. Not a single complaint since then.
                                    I am thrilled with YesWater. Just one call for a filter change and they greet you by name, know your address, and even give you recommendations for filter life. Quick, easy, convenient.
                                    The service is top notch! Thank you, YesWater. It's a cozy experience with you.
                                </p>
                            </div>
                        </div>
                    </div>
                </SplideSlide>

                <SplideSlide>
                    <div class="">
                        <div class="p-4 flex justify-center items-center">
                            <img src="{p_2}" alt="" class="w-[200px] h-[200px] rounded-full object-cover">
                        </div>

                        <div class="p-4 flex flex-col">
                            <div class="pl-4 flex flex-row justify-between items-center">
                                <h1 class="text-3xl text-blue-d font-dosis">Chesley Morris</h1>
                                <svg class="w-12 h-12 fill-slate-300">
                                    <use xlink:href="#quotation"></use>
                                </svg>
                            </div>
                            <div class="p-4">
                                <h3 class="text-blue-m text-xl">Physicist</h3>
                            </div>
                            <div class="bg-white rounded-3xl">
                                <p class="p-4 text-blue-d text-justify">
                                    Delicious filtered water is possible.
                                    Filtered water is delicious, as well as devoid of the unpleasant smell of chlorine, affects the improvement of the taste of morning coffee or tea. However, do not rush to drink your morning drink, remember that there is nothing better than a glass of pure water!
                                </p>
                            </div>
                        </div>
                    </div>
                </SplideSlide>
            </SplideTrack>
        </Splide>
            
    </div>
</section>


<style>
    .splide__arrow--next {
        right: -10em;
    }
</style>
